// "专题", "热播", "必听", "达人"
<template>
  <div>
    <div class="albumlists">
      <div class="filter">
        <div
          v-for="(item,index) in albumnav"
          :key="index"
          class="item"
          :class="albumnavcurrent==index?'on':''"
          @click="albumnavBtn(index)"
        >
          <div v-if="index!=3">
            {{item}}
            <img
              class="cir"
              src="https://youyang-cdn.mdshuzhi.com/upload/tag_select.png"
            />
          </div>
          <router-link to="/Talent" tag="div" v-else>
            {{item}}
            <img
              class="cir"
              src="https://youyang-cdn.mdshuzhi.com/upload/tag_select.png"
            />
          </router-link>
        </div>
      </div>
      <div class="lists">
        <div class="top">
          <div class="item" :class="ishot?'on':''" @click="hot">最HOT</div>
          <div class="item" :class="ishot?'':'on'" @click="hot">最新</div>
        </div>
        <div class="con" v-if="albumlists1.length >0 || albumlists2.length > 0">
          <scroller :on-infinite="infinite" ref="myscroller" class="scroll">
            <!-- 热播列表 -->
            <template v-if="albumnavcurrent==1">
              <div v-for="(item,index) in albumlists2" :key="index" class="item hotitem">
                <router-link
                  :to="'/Playing?audioId='+item.id"
                >
                <div class="pic zhuanji">
                  <img :src="item.imgUrl" />
                  <img
                    src="https://youyang-cdn.mdshuzhi.com/upload/tag_no1.png"
                    v-if="index==0"
                    class="icon"
                  />
                  <img
                    src="https://youyang-cdn.mdshuzhi.com/upload/tag_no2.png"
                    v-if="index==1"
                    class="icon"
                  />
                  <img
                    src="https://youyang-cdn.mdshuzhi.com/upload/tag_no3.png"
                    v-if="index==2"
                    class="icon"
                  />
                </div>
                <div class="right">
                  <div class="name">
                    <img
                      class="hot_icon"
                      v-if="item && item.isHot==1"
                      src="https://youyang-cdn.mdshuzhi.com/upload/tag_hot.png"
                    />
                    <span class="n">{{item.title || '刘德华专属FM'}}</span>
                    <!-- 外链指定页 -->
                    <template v-if="item.hasVideo==1 && item.videoLink">
                      <a :href="item.videoLink" class="mvlook">看</a>
                    </template>
                    <span class="div_icon" v-if="item && item.isNew"></span>
                  </div>
                  <div class="nums">播放量：{{item.playCount || 0}}</div>
                </div>
                </router-link>
              </div>
            </template>
            <!-- 推荐列表 -->
            <template v-else>
              <div v-for="(item,index) in albumlists1" :key="index" class="item">
                <router-link
                  :to="item.type == 1?'/ExclusiveColumnList?id='+item.id+'&title='+item.title+'&img='+item.imgUrl+'&sortBy='+sortBy:'/albumDetail?id='+item.id+'&sortBy='+sortBy"
                >
                  <div class="pic zhuanji">
                    <img :src="item.imgUrl" />
                    <img
                      src="https://youyang-cdn.mdshuzhi.com/upload/tag_no1.png"
                      v-if="index==0"
                      class="icon"
                    />
                    <img
                      src="https://youyang-cdn.mdshuzhi.com/upload/tag_no2.png"
                      v-if="index==1"
                      class="icon"
                    />
                    <img
                      src="https://youyang-cdn.mdshuzhi.com/upload/tag_no3.png"
                      v-if="index==2"
                      class="icon"
                    />
                  </div>
                  <div class="right">
                    <div class="name">
                      <img
                        class="hot_icon"
                        v-if="item && item.isHot==1"
                        src="https://youyang-cdn.mdshuzhi.com/upload/tag_hot.png"
                      />
                      <span class="n">{{item.title}}</span>
                      <span class="div_icon" v-if="item && item.isNew"></span>
                    </div>
                    <div class="nums">播放量：{{item.playCount || 0}}</div>
                  </div>
                  <div>
                    <img
                      class="play"
                      src="../../../static/images/icon_play4@2x.png"
                    />
                  </div>
                </router-link>
              </div>
            </template>
            <!-- <div class="end" v-if="isEnd">没有更多了~</div> -->
          </scroller>
        </div>
        <!-- <div class="empty" v-else>暂无收录</div> -->
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import { Indicator } from "mint-ui";
import Footer from "@/components/layer/footer";
export default {
  name: "",
  components: { Footer },
  data() {
    return {
      albumnav: ["专题", "热播", "推荐", "达人"],
      albumnavcurrent: 0,
      ishot: true,
      isTopic: 1,
      isMust: 0,
      sortBy: 0,
      albumlists1: [],
      albumlists2: [],
      page: 1,
      pageSize: 10,
      isEnd: false,
    };
  },
  created() {
    console.log("this.$route", this.$route);
    this.albumnavcurrent =  this.$route.query.albumnavcurrent
    this.ishot =  this.$route.query.ishot
    this.sortBy =  this.$route.query.sortBy
    this.collectionList();
    window.addEventListener('mousewheel',this.handleScroll);
    console.log(window.mousewheel)
  },
  beforeRouteUpdate: (to, from, next) => {
    console.log(to, from);
    this.$route.meta.title = "热播";
  },
  destroyed(){
    window.removeEventListener('mousewheel',this.handleScroll)
  },
  methods: {
    handleScroll(e){
      let that = this  //此this指向的是vue
      console.log(e.wheelDelta)
      if (e.wheelDelta < 0) {
          that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
      } else {
        that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
      }
    },
    // 切换tab选项
    albumnavBtn(index) {
      console.log("(index)");
      this.albumnavcurrent = index;
      this.ishot = true;
      this.sortBy = 2;
      this.albumlists1 = [];
      this.albumlists2 = [];
      this.page = 1;
      this.pageSize = 10;
      this.isEnd = false;
      if (index == 0) {
        this.isMust = 0;
        this.isTopic = 1;
      }
      if (index == 2) {
        this.isMust = 1;
        this.isTopic = 0;
      }
      this.collectionList();
    },
    // 上拉加载
    infinite(done) {
      console.log("this.isEnd", this.isEnd);
      setTimeout(() => {
        if (this.isEnd) {
          console.log(this.isEnd,this.$refs.myscroller.finishInfinite(true))
            this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        } else {
            console.log("进行下一次加载操作");
            this.page++;
            this.collectionList();
            done(); //进行下一次加载操作
        }
      },1500)
    },
    // 切换最hot和最新按钮
    hot() {
      this.ishot = !this.ishot;
      this.albumlists1 = [];
      this.albumlists2 = [];
      this.page = 1;
      this.pageSize = 10;
      this.isEnd = false;
      this.sortBy = this.ishot ? 2 : 1;
      Indicator.open({
        text: "Loading...",
        spinnerType: "fading-circle",
      });
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        Indicator.close();
        this.collectionList();
      }, 500);
    },
    // 获取数据
    collectionList() {
      if (this.albumnavcurrent == 1) {
        //热播
        controller
          .audioList({
            sortBy: this.sortBy,
            isHotPlay: 1,
            page: this.page,
            pageSize: this.pageSize,
          })
          .then((res) => {
            console.log("热播", res);
            if (res.baseData.list.length > 0) {
              this.albumlists2 = this.albumlists2.concat(res.baseData.list);
              this.isEnd = res.baseData.lastPage;
            }
          });
      } else if (this.albumnavcurrent == 0) {
        // 专题
        controller
          .compilationList({
            sortBy: this.sortBy,
            isTopic: this.isTopic,
            page: this.page,
            pageSize: this.pageSize,
          })
          .then((res) => {
            console.log("专题", res);

            if (res.baseData.list.length > 0) {
              this.albumlists1 = this.albumlists1.concat(res.baseData.list);
              this.isEnd = res.baseData.lastPage;
            }
          });
      } else {
        controller
          .collectionList({
            sortBy: this.sortBy,
            isMust: this.isMust,
            page: this.page,
            pageSize: this.pageSize,
          })
          .then((res) => {
            console.log("必听", res);
            if (res.baseData.list.length > 0) {
              this.albumlists1 = this.albumlists1.concat(res.baseData.list);
              this.isEnd = res.baseData.lastPage;
            }
          });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.mvlook {
  color: #ec7169 !important;
  font-size: 24px !important;
  width: 48px !important;
  height: 32px !important;
  text-align: center;
  border: 1px solid #ec7169 !important;
  line-height: 32px !important;
  vertical-align: middle;
  margin-left: 10px;
  display: inline-block;
  border-radius: 4px;
}
.albumlists {
  overflow: hidden;
  .filter {
    overflow: hidden;
    height: 140px;
    line-height: 140px;
    padding-left: 160px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    background: url(https://youyang-cdn.mdshuzhi.com/upload/pic_project_bg.png)
      no-repeat 0 0;
    background-size: 100%;
    .item {
      float: left;
      width: 25%;
      opacity: 0.6;
      position: relative;
      .cir {
        width: 24px;
        height: 10px;
        line-height: 24px;
        display: inline-template;
        position: absolute;
        z-index: 1;
        bottom: 30px;
        left: 0;
        right: 0;
        margin: auto;
        display: none;
      }
    }
    .on {
      opacity: 1;
      font-weight: 700;
      .cir {
        display: block;
      }
    }
  }
  .lists {
    overflow: hidden;
    .top {
      padding: 30px 23px;
      color: #a8acbb;
      overflow: hidden;
      .item {
        float: left;
        margin-right: 34px;
      }
      .on {
        color: #e66d4d;
      }
      .more {
        float: right;
      }
    }
    .con {
      /deep/ ._v-container{
        left: 50%;
        transform: translate(-50%);
      }
      .scroll {
        width: 100%;
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;
        top: 230px;
        bottom: 130px;
        height: auto!important;
        /*height: calc(100vh - (250px))!important;*/
      }
      .scroll ._v-content{
        height: 100%;
        padding-bottom: 40px;
      }

      .item {
        padding: 0 24px;
        margin-bottom: 32px;
        overflow: hidden;
        position: relative;
      }
      .pic {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        margin-right: 32px;
        float: left;
        background-color: #eee;
        position: relative;
        img {
          border-radius: 8px;
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 2;
          background-color: #eee;
        }
        .icon {
          width: 40px;
          height: 40px;
          position: absolute;
          z-index: 3;
          left: 0;
          top: 0;
        }
        &:after {
          content: "";
          width: 110px;
          height: 110px;
          background: rgba(50, 50, 50, 1);
          border-radius: 50%;
          position: absolute;
          z-index: 1;
          top: 0;
          bottom: 0;
          right: -16px;
          margin: auto;
        }
      }
      .hotitem .pic:after {
        display: none;
      }
      .right {
        overflow: hidden;
      }
      .hot_icon {
        width: 28px;
        height: 28px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 10px;
      }
      .name {
        color: #323232;
        font-size: 30px;
        margin-bottom: 20px;
        padding-right: 80px;
        display: flex;
        align-items: center;
        .n {
          display: inline-block;
          max-width: 70%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .nums {
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        display: inline-block;
        background: rgba(242, 171, 94, 0.16);
        color: #f2ab5e;
        font-size: 20px;
        border-radius: 4px;
        font-size: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .play {
        width: 68px;
        height: 68px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 12px;
        margin: auto;
        z-index: 1;
      }
    }
  }
}
</style>
